<template>
  <div class="hidden-scrollbar">
    <!-- 左上角返回按钮 -->
    <back-arrow style="z-index: 20;"></back-arrow>
    <!-- 顶部占位导航条 -->
    <div class="cinema-info-navbar"></div>
    <template v-if="cinemaInfo">
      <!-- popup 弹出层 -->
      <van-popup v-model="isShowPopup" position="top" class="hidden-scrollbar" :close-on-popstate="true"
                 :closeable="true" close-icon-position="top-left" :duration="0.5"
                 :overlay-style="{'background-color': 'white'}">
        <div class="popup-cinema-name">{{ cinemaInfo.name }}</div>
        <ul class="service-list" v-if="cinemaInfo.services">
          <li v-for="(item, index) in cinemaInfo.services" :key="index">
            <div class="service-item-left">
              <span>{{ item.name }}</span>
            </div>
            <div class="service-item-right">
              {{ item.description }}
            </div>
          </li>
        </ul>
      </van-popup>
      <!-- 影院详情 -->
      <div class="cinema-header-title" v-stickytop>{{ cinemaInfo.name }}</div>
      <div class="cinema-service-list" v-if="cinemaInfo.services" @click="isShowPopup = !isShowPopup">
        <span>
          <b v-for="(service, index) in cinemaInfo.services" :key="index">
            {{ service.name }}
          </b>
        </span>
        <i class="iconfont icon-you"></i>
      </div>
      <div class="cinema-service-list" v-else></div>
      <div class="cinema-address">
        <div class="cinema-address-left"><i class="iconfont icon-weizhi"></i>{{ cinemaInfo.address }}</div>
        <div class="cinema-address-right"><img src="@/assets/images/tel-icon.png" alt="tel-icon"></div>
      </div>
      <!-- 电影列表组件 -->
      <cinema-film-list :cinemaId="cinemaId" :filmId="filmId" :showDate="showDate"></cinema-film-list>
    </template>
  </div>
</template>

<script>
import { Popup } from 'vant'
import { load, getTimestamp } from '@/utils'
import { directiveMixins } from '@/mixins'
import BackArrow from '@/components/BackArrow'
import CinemaFilmList from './CinemaFilmList.vue'

export default {
  name: 'CinemaView',
  props: ['cinemaId', 'filmId', 'showDate'],
  mixins: [directiveMixins],
  components: { BackArrow, [Popup.name]: Popup, CinemaFilmList },
  data () {
    return {
      cinemaInfo: null,
      isShowPopup: false,
      scrollTop: 0
    }
  },
  mounted () {
    load({
      url: `/gateway/?cinemaId=${this.cinemaId}&k=${getTimestamp()}`,
      headers: { 'X-Host': 'mall.film-ticket.cinema.info' }
    })
      .then((res) => {
        this.cinemaInfo = Object.freeze(res.data.data.cinema)
      })
      .catch((err) => {
        console.warn(err)
        this.cinemaInfo = null
      })
  }
}
</script>

<style lang="scss" scoped>
.cinema-info-navbar {
  height: 44px;
  background-color: white;
  position: sticky;
  top: 0;
}
.popup-cinema-name {
  height: 44px;
  font-size: 17px;
  text-align: center;
  line-height: 44px;
  margin-top: 46px;
}
.service-list {
  padding: 0px 25px;
  display: flex;
  flex-direction: column;
  li {
    display: flex;
    margin-top: 20px;
    .service-item-left {
      width: 25vw;
      font-size: 12px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      span {
        color: #ffb232;
        display: inline-block;
        border: 1px solid #ffb232;
        border-radius: 2px;
        padding: 0 6px;
      }
    }
    .service-item-right {
      width: 75vw;
      color: #797d82;
      font-size: 12px;
    }
  }
}
.cinema-header-title {
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 17px;
  background-color: white;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.cinema-service-list {
  cursor: pointer;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: white;
  padding: 6px 0 15px 0;
  span {
    max-width: 85vw;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    b {
      font-weight: normal;
      font-size: 12px;
      display: inline-block;
      color: #ffb232;
      border: 1px solid #ffb232;
      border-radius: 2px;
      padding: 0 6px;
      margin: 0 3px;
    }
  }
  i {
    margin-top: 3px;
    margin-left: 4px;
    font-size: 12px;
    color: #ffb232;
  }
}
.cinema-address {
  height: 50px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f4f4f4;
  box-sizing: border-box;
  .cinema-address-left {
    max-width: 85vw;
    padding-left: 18px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: left;
    i {
      color: #797d82;
      font-size: 20px;
      margin-right: 10px;
    }
  }
  .cinema-address-right {
    width: 15vw;
    display: flex;
    justify-content: center;
    img {
      width: 18px;
      height: 18px;
    }
  }
}
</style>
